import React, { Component } from 'react'
import { NavLink } from 'react-router-dom'
import './leftnav.scss'
import { Menu } from 'antd';
import {connect} from 'react-redux'

import menuList from '../../../config/menuConfig'

import logo from '../../../assets/logo.png'

import icon from '../../../config/iconConfig'
const IconFont = icon.icon()

const { SubMenu } = Menu

class Leftnav extends Component {
    /*
  判断当前登陆用户对item是否有权限
   */
    hasAuth = (item) => {
        const { isPublic,title } = item
        const menus = JSON.parse(JSON.parse(this.props.user.data)[0].autharr)
        const username = JSON.parse(this.props.user.data)[0].username
        /*
        1. 如果当前用户是admin
        2. 如果当前item是公开的
        3. 当前用户有此item的权限: key有没有menus中
         */
        if (username === 'admin' || isPublic || menus.indexOf(title) !== -1) {
            return true
        }

        return false
    }
    getChildNodes = (menuList)=>{
        return menuList.map(item => {
            if (!item.children) {
                return (
                    <Menu.Item key={item.key}>
                        <NavLink to={item.key}>
                            <IconFont type={item.icon} />
                            <span>{item.title}</span>
                        </NavLink>
                    </Menu.Item>
                )
            } else {
                return (
                    <SubMenu
                        key={item.key}
                        title={
                            <span>
                                <IconFont type={item.icon} />
                                <span>{item.title}</span>
                            </span>
                        }
                    >
                        {this.getChildNodes(item.children)}
                    </SubMenu>
                )
            }

        })
    }
    getMenuNodes = (menuList) => {
        
        return menuList.reduce((pre, item) => {
            // 如果当前用户有item对应的权限, 才需要显示对应的菜单项
            if (this.hasAuth(item)) {
                // 向pre添加<Menu.Item>
                if (!item.children) {
                    pre.push((
                        <Menu.Item key={item.key}>
                            <NavLink to={item.key}>
                                <IconFont type={item.icon} />
                                <span>{item.title}</span>
                            </NavLink>
                        </Menu.Item>
                    ))
                } else {
                    // 向pre添加<SubMenu>
                    pre.push((
                        <SubMenu
                            key={item.key}
                            title={
                                <span>
                                    <IconFont type={item.icon} />
                                    <span>{item.title}</span>
                                </span>
                            }
                        >
                            {this.getChildNodes(item.children)}
                        </SubMenu>
                    ))
                }
            }
            
            return pre
        }, [])
    }
    /*
    在第一次render()之前执行一次
    为第一个render()准备数据(必须同步的)
     */
    // componentDidMount() {
    //     this.menuNodes = this.getMenuNodes(menuList)
    //     console.log(JSON.parse(JSON.parse(memoryUtils.user.data)[0].autharr));
    // }

    render() {
        return (
            <div id="leftnav">
                <NavLink to='/' className="flex_start">
                    <img src={logo} alt="" />
                    <h1>金皮卡后台</h1>
                </NavLink>

                <Menu
                    mode="inline"
                    theme="dark"
                // selectedKeys={[path]}
                // defaultOpenKeys={[openKey]}
                >

                    {
                        this.getMenuNodes(menuList)
                    }

                </Menu>
            </div>
        )
    }
}
export default connect(
    state =>({
        user:state.user
    }),
    {}
)(Leftnav)